<template>
    <view>
        <!-- <view class="page">
  <view class="shop-plat">
    <van-tabs bind:change="queryListByType" title-active-color="#333333" title-inactive-color="#999999"
      nav-class="nav-class" custom-class="custom-class">
      <van-tab title="邀请入驻">
        <view class="search-stylist">
          <van-search model:value="{{ nickname }}" placeholder="请输入美发师名字" bind:search="queryStylist"
            bindblur='nicknameblur' bind:clear="onClear" />
        </view>
      </van-tab>
      <van-tab title="入驻申请({{nohandlerNum}})"></van-tab>
    </van-tabs>
  </view>
  <scroll-view scroll-y='true' style="height:{{height}}px" bindscrolltolower='more'>
    <block wx:for="{{hairStylist}}" wx:key="userId">
      <view class="stylist-card" catch:tap="onQueryDetail" data-item="{{item}}">
        <view class="stylist-card1">
          <image class="headerimg" src="{{item.headportrait}}"></image>
          <view class="stylist-card-second stylelist-detail">
            <view class="flexbox centers">
              <text class="shoptitletext1 ">{{item.nickname}}</text>
              <text class="job3">{{item.position}}</text>
            </view>
            <view class="mt-20 score centers">
              <image class="clip" src="https://kjyiyue.oss-cn-shenzhen.aliyuncs.com/images/clip.png" />
              <text class="">{{item.score}}/{{item.commentNumber}}条</text>
            </view>
            <view class="mt-20 order">
              <text>总接单{{item.orderNumber}} | {{item.practitioneryear ? item.practitioneryear : ''}}</text>
            </view>
          </view>
        </view>
        <view class="card-last">
          <view class="price">
            <text wx:if="{{item.money}}">￥{{item.money}}</text>
          </view>
          <view>
            <text class="project mt-20">{{item.meal}}</text>
          </view>
          <view class="mystylists-distince-wrap">
            <text class="project" wx:if="{{item.distance < 1000}}">{{item.distance}}m</text>
            <text class="project" wx:if="{{item.distance >= 1000}}">{{item.newdistance}}km</text>
            <image class="shopicon" src="{{shopimgUrl + 'location.png'}}"></image>
          </view>
        </view>
      </view>
    </block>
    <view class="w-100">
      <van-empty wx:if="{{hairStylist.length == 0 || hairStylist == null}}" description="暂无美发师" />
    </view>
  </scroll-view>
</view> -->

        <!-- 新 -->
        <view class="page">
            <van-tabs nav-class="nav-class" custom-class="custom-class" :active="active" @change="queryListByType"
                title-active-color="#333333" title-inactive-color="#999999">
                <van-tab title="邀请入驻">
                    <view>
                        <van-search v-model="searchStoreName" placeholder="请输入美发师名字" @search="onSearch"
                            @change="onChangeinput" />
                    </view>
                    <view class="filter-header">
                        <view class="header" @tap.stop.prevent="showNearby">
                            <text>{{ name }}</text>
                            <view class="jiao ml-10"></view>
                        </view>
                        <view class="header" @tap.stop.prevent="showsortFun">
                            <text>{{ name1 }}</text>
                            <view class="jiao ml-10"></view>
                        </view>
                        <view class="header" @tap="showDialogBtn">
                            <text>筛选</text>
                            <image src="/static/images/sort.png" class="settlelist-sort"></image>
                        </view>
                    </view>
                    <scroll-view :scroll-y="true" :style="'height:' + height + 'px'" @scrolltolower="more">
                        <block v-if="hairStylist.length > 0" v-for="(item, index) in hairStylist" :key="item.userId">
                            <view class="stylist-card" @tap.stop.prevent="onQueryDetail" :data-item="item">
                                <view class="stylist-card1">
                                    <image class="headerimg" mode="aspectFill" :src="item.headportrait"></image>
                                    <view class="stylist-card-second stylelist-detail">
                                        <view class="flexbox centers">
                                            <text class="shoptitletext1">{{ item.nickname }}</text>
                                            <text class="job3">{{ item.position }}</text>
                                        </view>
                                        <view class="mt-20 score centers">
                                            <image class="clip"
                                                src="https://kjyiyue.oss-cn-shenzhen.aliyuncs.com/images/clip.png" />
                                            <text class="">{{ item.score }}/{{ item.commentNumber }}条</text>
                                        </view>
                                        <view class="mt-20 order">
                                            <text>总接单{{ item.orderNumber }}{{
                                                item.practitioneryear ? ' | ' +
                                                    item.practitioneryear : ''
                                            }}</text>
                                        </view>
                                    </view>
                                </view>
                                <view class="card-last">
                                    <view class="price">
                                        <text v-if="item.money">￥{{ item.money }}</text>
                                    </view>
                                    <view>
                                        <text class="project mt-20">{{ item.meal }}</text>
                                    </view>
                                    <view class="mystylists-distince-wrap">
                                        <text class="project" v-if="item.distance < 1000">{{ item.distance }}m</text>
                                        <text class="project" v-if="item.distance >= 1000">{{
                                            item.newdistance
                                        }}km</text>
                                        <image class="shopicon" :src="shopimgUrl + 'location.png'"></image>
                                    </view>
                                </view>
                            </view>

                            <!-- 0 无 1 门店邀请中,待处理 2 门店邀请成功 3 门店邀请过,被拒绝 4 美发师申请中,待处理 5 美发师申请成功 6 美发师申请过,被拒绝 -->

                            <view class="statusbox1" v-if="item.status == 0">可邀请</view>

                            <view class="statusbox1" v-if="item.status == 1">邀请中,待处理</view>

                            <view class="statusbox1" v-if="item.status == 2">邀请成功</view>

                            <view class="statusbox1" v-if="item.status == 3">邀请过，已被拒</view>

                            <view class="statusbox1" v-if="item.status == 4">申请中,待处理</view>

                            <view class="statusbox1" v-if="item.status == 5">已入驻</view>

                            <view class="statusbox1" v-if="item.status == 6">申请过,已拒绝</view>
                        </block>
                        <view class="w-100">
                            <van-empty v-if="hairStylist.length == 0 || hairStylist == null" description="暂无美发师" />
                        </view>
                    </scroll-view>
                </van-tab>
                <van-tab :title="'入驻申请(' + nohandlerNum + ')'">
                    <view class="w-100">
                        <block v-for="(item, index) in nviteStylist" :key="index">
                            <view class="stylist-card" @tap.stop.prevent="onQueryDetail" :data-item="item">
                                <view class="stylist-card1">
                                    <image class="headerimg" mode="aspectFill" :src="item.headportrait"></image>
                                    <view class="stylist-card-second stylelist-detail">
                                        <view class="flexbox centers">
                                            <text class="shoptitletext1">{{ item.nickname }}</text>
                                            <text class="job3">{{ item.position }}</text>
                                        </view>
                                        <view class="mt-20 score centers">
                                            <image class="clip"
                                                src="https://kjyiyue.oss-cn-shenzhen.aliyuncs.com/images/clip.png" />
                                            <text class="">{{ item.score }}/{{ item.commentNumber }}条</text>
                                        </view>
                                        <view class="mt-20 order">
                                            <text>总接单{{ item.orderNumber }}{{
                                                item.practitioneryear ? ' | ' +
                                                    item.practitioneryear : ''
                                            }}</text>
                                        </view>
                                    </view>
                                </view>
                                <view class="card-last">
                                    <view class="price">
                                        <text v-if="item.money">￥{{ item.money }}</text>
                                    </view>
                                    <view>
                                        <text class="project mt-20">{{ item.meal }}</text>
                                    </view>
                                    <view class="mystylists-distince-wrap">
                                        <text class="project" v-if="item.distance < 1000">{{ item.distance }}m</text>
                                        <text class="project" v-if="item.distance >= 1000">{{
                                            item.newdistance
                                        }}km</text>
                                        <image class="shopicon" :src="shopimgUrl + 'location.png'"></image>
                                    </view>
                                </view>
                            </view>

                            <!-- 0 无 1 门店邀请中,待处理 2 门店邀请成功 3 门店邀请过,被拒绝 4 美发师申请中,待处理 5 美发师申请成功 6 美发师申请过,被拒绝 -->

                            <view class="statusbox1" v-if="item.status == 0">可邀请</view>

                            <view class="statusbox1" v-if="item.status == 1">邀请中,待处理</view>

                            <view class="statusbox1" v-if="item.status == 2">邀请成功</view>

                            <view class="statusbox1" v-if="item.status == 3">邀请过，已被拒</view>

                            <view class="statusbox1" v-if="item.status == 4">申请中,待处理</view>

                            <view class="statusbox1" v-if="item.status == 5">已入驻</view>

                            <view class="statusbox1" v-if="item.status == 6">申请过,已拒绝</view>
                        </block>
                        <van-empty v-if="nviteStylist.length == 0 || nviteStylist == null" description="暂无美发师申请" />
                    </view>
                </van-tab>
            </van-tabs>
        </view>
        <!-- 弹窗 -->
        <view class="modal-mask" @tap="hideModal" @touchmove.stop.prevent="preventTouchMove" v-if="showModal"></view>
        <view class="modal-dialog" v-if="showModal">
            <view class="modal-header1">
                <view class="modal-title">
                    <view class="btn-cancel" @tap="onCancel" data-status="cancel">重置</view>
                </view>
            </view>
            <view class="modal-content">
                <view class="section_cycle1 last" v-for="(item, index) in couponList" :key="index">
                    <text>{{ item.title }}</text>

                    <view class="section_cycle">
                        <view :class="a.bool ? 'section_cycle_checked' : 'section_cycle_nochecked'"
                            @tap.stop.prevent="onShowchecked" :data-items="a" v-for="(a, index1) in item.list"
                            :key="index1">
                            {{ a.name }}
                        </view>
                    </view>
                </view>
            </view>
            <view class="modal-footer" @tap="onConfirm">
                <view class="btn-confirm" data-status="confirm">确定</view>
            </view>
        </view>

        <!-- 附近和综合弹窗 -->
        <van-popup :show="shownearby" @close="onClickHidenearbys" position="top" custom-style="height: 900rpx">
            <view class="wrapper">
                <view class="wbox" @tap.stop.prevent="shop">
                    <view class="textbox">
                        <view class="textbox-1">
                            <text>邀请入驻</text>
                            <view class="hx"></view>
                        </view>
                        <view class="textbox-2" @tap.stop.prevent="onhideoverlay">入驻申请({{ nohandlerNum }})</view>
                    </view>
                    <view>
                        <van-search v-model="searchStoreName" placeholder="请输入美发师名字" @search="onSearch"
                            @change="onChangeinput" />
                    </view>
                    <view class="filter-header">
                        <view :class="'header ' + (areaVisible ? 'color-0' : '')" @tap.stop.prevent="showNearby">
                            <text>{{ name }}</text>
                            <view :class="'ml-10 ' + (areaVisible ? 'jiao1' : 'jiao')"></view>
                        </view>
                        <view :class="'header ' + (nearbyVisible ? 'color-0' : '')" @tap.stop.prevent="showsortFun">
                            <text>{{ name1 }}</text>
                            <view :class="'ml-10 ' + (nearbyVisible ? 'jiao1' : 'jiao')"></view>
                        </view>
                        <view class="header" @tap.stop.prevent="showDialogBtn">
                            <text>筛选</text>
                            <image src="/static/images/sort.png" class="settlelist-sort"></image>
                        </view>
                    </view>
                    <view class="flexbox" v-if="areaVisible">
                        <view class="leftbox">
                            <view :data-list="item.list" @tap.stop.prevent="onSelectArea"
                                :class="'lefttext ' + (showAreaindex === index ? 'lefttext1' : '')" :data-index="index"
                                :data-id="item.id" v-if="item.level != 2" :data-level="item.level"
                                :data-name="item.name" v-for="(item, index) in showArealist" :key="index">
                                <view>{{ item.name }}</view>
                            </view>
                        </view>
                        <view class="rightbox">
                            <view v-if="districtId < 21" class="righttext" :data-id="item"
                                @tap.stop.prevent="onDistance" v-for="(item, index) in showArealistright" :key="index">
                                <view :class="showkm == item ? 'c-o' : ''">{{ item }}km</view>
                            </view>
                        </view>
                    </view>
                    <view class="flexbox" v-if="nearbyVisible">
                        <label class="label">
                            <view :data-list="item" @tap="onSelectRank"
                                :class="'flexbox-sb ranklb prl-40 ' + (multiListindex === index ? 'lefttext1' : '')"
                                :data-index="index" v-for="(item, index) in multiList" :key="index">
                                <view>{{ item.text }}</view>

                                <view v-if="multiListindex === index" class="checkbox">
                                    <van-icon name="success" color="#FF8722" />
                                </view>
                            </view>
                        </label>
                    </view>
                </view>
            </view>
        </van-popup>
    </view>
</template>

<script>
// pages/my_stylists/my_stylists.js
const app = getApp(); // 引入app

const _request = require('../../utils/request.js'); // 引入require;

export default {
    data() {
        return {
            imgUrl: app.globalData.imgUrl,

            //全局img路径
            shopimgUrl: app.globalData.shopimgUrl,

            nickname: '',
            page: 1,
            hairStylist: [],
            height: 0,
            status: 0,
            nohandlerNum: 0,
            sortType: '0',
            cityId: '',
            userId: '',
            searchStoreName: '',
            mainActiveIndex: 0,
            activeId: 1,
            showkm: '',
            showArealistright: [],

            showArealist: [
                {
                    name: '附近',
                    id: 0,
                    list: ['0.5', '1', '2', '3', '4', '5', '10', '20']
                },
                {
                    name: '全部区域',
                    id: ''
                }
            ],

            multiList: [
                {
                    text: '综合排序',
                    value: 0
                },
                {
                    text: '距离最近',
                    value: 1
                },
                {
                    text: '月接单最多',
                    value: 2
                },
                {
                    text: '评论最多',
                    value: 3
                },
                {
                    text: '价格最低',
                    value: 4
                },
                {
                    text: '价格最高',
                    value: 5
                }
            ],

            multiListindex: 3,
            multiValue: 3,
            page: 1,
            height: 0,
            active: 0,
            shownearby: false,
            name: '附近',
            name1: '评论最多',
            districtId: '',
            cityId: '',
            maxDistance: '',
            categoryIds: null,
            gradeId: null,
            showAreaindex: 0,
            nearbyVisible: false,
            areaVisible: false,
            position: '',
            coupon: '',
            showModal: false,

            couponList: [
                {
                    title: '美发师等级',
                    list: [
                        {
                            name: '高级',
                            bool: false,
                            status: 1
                        },
                        {
                            name: '资深',
                            bool: false,
                            status: 1
                        },
                        {
                            name: '首席',
                            bool: false,
                            status: 1
                        },
                        {
                            name: '总监',
                            bool: false,
                            status: 1
                        },
                        {
                            name: '督导',
                            bool: false,
                            status: 1
                        },
                        {
                            name: '助理',
                            bool: false,
                            status: 1
                        }
                    ]
                },
                {
                    title: '特惠活动',
                    list: [
                        {
                            name: '优惠券',
                            bool: false,
                            status: 2,
                            type: 1
                        },
                        {
                            name: '套餐券',
                            bool: false,
                            status: 2,
                            type: 2
                        }
                    ]
                }
            ],

            serviceItem: [],

            //记录lastPage去重
            lastPage: 1,

            showsort: false,
            nviteStylist: '',

            a: {
                bool: false,
                name: ''
            }
        };
    }
    /**
     * 生命周期函数--监听页面卸载
     */,
    onUnload: function () {
        uni.reLaunch({
            url: '/firstpages/home/index'
        });
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        uni.getSystemInfo({
            success: (res) => {
                this.setData({
                    height: res.windowHeight
                });
            }
        }); // 获取区域

        this.getAreaByList(); //this.data.hairStylist = [];
    },
    onShow() {
        this.storeStylistsByNexus();
        this.getNohandlerNum();
    },
    methods: {
        /**
         * 弹窗
         */
        showDialogBtn: function () {
            this.setData({
                showModal: true,
                shownearby: false,
                showsort: false
            }); // couponList: this.data.couponList.map(item => {
            //   item.list.map(item => {
            //     item.bool = false
            //     return item
            //   })
            //   return item
            // }),
            // position: '',
            // coupon: ''
        },

        /**
         * 隐藏模态对话框
         */
        hideModal: function () {
            this.setData({
                showModal: false
            });
        },

        onCancel: function () {
            this.setData({
                categoryIds: '',
                gradeId: '',
                page: 1,
                couponList: this.couponList.map((item) => {
                    item.list.map((item) => {
                        item.bool = false;
                        return item;
                    });
                    return item;
                })
            });
            this.storeStylistsByNexus();
        },

        // 获取选择中服务项目
        getserviceItemArr() {
            let list = '';
            let list1 = '';
            this.couponList.map((item) => {
                if (item.title == '美发师等级') {
                    item.list.map((item) => {
                        if (item.bool == true) {
                            list = item;
                        }
                    });
                } else {
                    item.list.map((item) => {
                        if (item.bool == true) {
                            list1 = item;
                        }
                    });
                }
            });
            this.setData({
                categoryIds: list,
                gradeId: ''
            });
        },

        // 点击高亮项目
        onShowchecked(e) {
            const { items } = e.currentTarget.dataset;
            this.setData({
                couponList: this.couponList.map((item) => {
                    if (item.title == '美发师等级' && items.status == 1) {
                        item.list.map((item) => {
                            if (item.name == items.name) {
                                item.bool = !items.bool;
                            } else {
                                item.bool = false;
                            }

                            return item;
                        });
                        return item;
                    } else if (item.title == '特惠活动' && items.status == 2) {
                        item.list.map((item) => {
                            if (item.name == items.name) {
                                item.bool = !items.bool;
                            } else {
                                item.bool = false;
                            }

                            return item;
                        });
                        return item;
                    } else {
                        return item;
                    }
                })
            }); // 获取选择中服务项目
            // this.getserviceItemArr()
        },

        /**
         * 对话框确认按钮点击事件
         */
        onConfirm: function () {
            this.hideModal();
            let data1 = '';
            let data2 = '';
            this.couponList.map((item) => {
                if (item.title == '美发师等级') {
                    item.list.map((item) => {
                        if (item.bool) {
                            data1 = item.name;
                        }
                    });
                } else if (item.title == '特惠活动') {
                    item.list.map((item) => {
                        if (item.bool) {
                            data2 = item.type;
                        }
                    });
                }
            });
            this.setData({
                position: data1,
                coupon: data2,
                page: 1
            });
            this.storeStylistsByNexus();
        },

        // 获取实时输入框的值
        onChangeinput(e) {
            this.setData({
                areaVisible: false,
                nearbyVisible: false,
                shownearby: false
            });

            if (e.detail.length == 0) {
                this.setData({
                    multiListindex: 3,
                    multiValue: 3,
                    page: 1,
                    districtId: '',
                    maxDistance: '',
                    categoryIds: '',
                    searchStoreName: ''
                }); // 查询数据

                this.storeStylistsByNexus();
            }
        },

        // 点击x按钮
        nicknameblur(e) {
            this.setData({
                multiListindex: 3,
                multiValue: 3,
                page: 1,
                districtId: '',
                maxDistance: '',
                categoryIds: '',
                searchStoreName: ''
            }); // 查询数据

            this.storeStylistsByNexus();
        },

        // 展示附近弹窗
        showNearby(e) {
            this.setData({
                shownearby: true,
                showArealistright: this.showArealist[0].list,
                areaVisible: true,
                nearbyVisible: false
            });
        },

        // 综合弹窗
        showsortFun(e) {
            this.setData({
                shownearby: true,
                nearbyVisible: true,
                areaVisible: false
            });
        },

        // 附近和综合弹窗
        onSelectArea(e) {
            const { list, index, id, name, level } = e.currentTarget.dataset;

            if (level == 2) {
                this.setData({
                    showArealistright: list,
                    showAreaindex: index,
                    name,
                    districtId: '',
                    maxDistance: '',
                    page: 1
                });
            } else if (level == 3) {
                this.setData({
                    showArealistright: list,
                    showAreaindex: index,
                    name,
                    districtId: id,
                    maxDistance: '',
                    page: 1
                });
            } else {
                this.setData({
                    showArealistright: list,
                    showAreaindex: index,
                    name,
                    districtId: '',
                    maxDistance: '',
                    page: 1
                });
            } // 点击地点

            if (index !== 0) {
                this.storeStylistsByNexus();
            }
        },

        // 点击附近距离
        onDistance(e) {
            const { id } = e.currentTarget.dataset;
            this.setData({
                maxDistance: id * 1000,
                districtId: '',
                page: 1,
                showkm: id
            });
            this.storeStylistsByNexus();
        },

        // 点击排行事件
        onSelectRank(e) {
            const { list, index } = e.currentTarget.dataset; // 排序类型，0综合排序，1距离最近，2月结单量最多，3评论量最多

            this.setData({
                multiValue: list.value,
                multiListindex: index,
                name1: list.text,
                page: 1
            });
            this.storeStylistsByNexus();
        },

        // tab切换事件
        onChange(e) {
            this.setData({
                active: e.detail.index
            });
        },

        // 切换邀请入驻
        onhideoverlay() {
            this.setData({
                active: 1,
                shownearby: false
            });
        },

        // 关闭附近和综合弹窗
        onClickHidenearbys() {
            this.setData({
                shownearby: false,
                nearbyVisible: false,
                areaVisible: false
            });
        },

        // 获取区域
        getAreaByList() {
            _request
                .postObj('/area/getAreaByStoreId', {
                    storeId: uni.getStorageSync('storeId')
                })
                .then((res) => {
                    this.setData({
                        showArealist: [...this.showArealist, ...res.data.data],
                        cityId: res.data.data[0].id,
                        page: 1
                    }); // 查询数据
                })
                .catch((error) => {
                    console.log(error, 'error');
                });
        },

        // 搜索门店
        onSearch(e) {
            this.setData({
                searchStoreName: e.detail,
                page: 1
            });
            this.storeStylistsByNexus();
        },

        nicknameblur: function (e) {
            this.setData({
                nickname: e.detail.value
            });
        },

        // 清空
        onClear: function () {
            this.setData({
                hairStylist: [],
                page: 1,
                nickname: ''
            });
            this.storeStylistsByNexus();
        },

        // 搜索
        queryStylist: function () {
            this.setData({
                hairStylist: [],
                page: 1
            });
            this.storeStylistsByNexus();
        },

        // 详情
        onQueryDetail(e) {
            const { item } = e.currentTarget.dataset;
            let obj = JSON.stringify(item);
            uni.navigateTo({
                url: '/pages/hairstylistdetails/index?hair=' + encodeURIComponent(obj) + '&status=' + item.status
            });
        },

        // 店内，平台切换
        queryListByType(event) {
            this.setData({
                hairStylist: [],
                page: 1,
                status: event.detail.index,
                nickname: ''
            });
            this.storeStylistsByNexus();
        },

        // 查询未处理的申请数
        getNohandlerNum() {
            _request
                .postObj('/storeStylist/inviteStylist', {
                    storeId: uni.getStorageSync('storeId'),
                    sortType: '1',
                    nickname: '',
                    page: 1,
                    status: 1
                })
                .then((res) => {
                    if (res.data.data != null) {
                        let stylists = res.data.data.rows;
                        let list = stylists.map((item) => {
                            let distance = (parseInt(item.distance) / 1000).toFixed(2) * 1000;
                            let newdistance = (Math.round(distance * 10) / 10000).toFixed(1);

                            if (item.lable) {
                                let money = item.lowestServicePrice.toFixed(2);
                                let moneys = item.lable.match(/\d+(.\d+)?/g).join('');
                                let meal = item.lable.split(moneys)[0];
                                return { ...item, money, meal, newdistance: newdistance };
                            } else {
                                return { ...item, newdistance: newdistance };
                            }
                        });
                        let listTemps = this.nviteStylist;
                        this.setData({
                            nohandlerNum: res.data.data.total,
                            nviteStylist: list
                        });
                    }
                });
        },

        // 查询美发师列表
        storeStylistsByNexus() {
            const { userId, page, categoryIds, cityId, searchStoreName, maxDistance, multiValue, districtId, stores, position, coupon, status } = this;

            _request
                .postObj('/storeStylist/inviteStylist', {
                    storeId: uni.getStorageSync('storeId'),
                    nickname: searchStoreName,
                    status: status,
                    sortType: multiValue,
                    // 排序类型，0综合排序，1距离最近，2月结单量最多，3评论量最多
                    cityId: cityId,
                    // 城市id
                    distance: maxDistance,
                    // 距离范围（单位米），默认0不限制
                    districtId: districtId,
                    //  区ID，默认0
                    position: position,
                    coupon: coupon,
                    page: page,
                    size: 10
                })
                .then((res) => {
                    if (res.data.data != null) {
                        var stylists = res.data.data;

                        if (this.status == 1) {
                            stylists = res.data.data.rows;
                        }

                        let list = stylists.map((item) => {
                            let distance = (parseInt(item.distance) / 1000).toFixed(2) * 1000;
                            let newdistance = (Math.round(distance * 10) / 10000).toFixed(1);

                            if (item.lable) {
                                let money = item.lowestServicePrice.toFixed(2);
                                let moneys = item.lable.match(/\d+(.\d+)?/g).join('');
                                let meal = item.lable.split(moneys)[0];
                                return { ...item, money, meal, newdistance: newdistance };
                            } else {
                                return { ...item, newdistance: newdistance };
                            }
                        });
                        var listTemps = this.hairStylist;
                        listTemps = [...listTemps, ...list]; //数据去重

                        let deWeight = () => {
                            let map = new Map();

                            for (let item of listTemps) {
                                map.set(item.stylistId, item);
                            }

                            return [...map.values()];
                        };

                        listTemps = deWeight(); // for (let i = 0; i < list.length; i++) {
                        //   listTemps.push(list[i]);
                        // }

                        this.setData({
                            hairStylist: page > 1 ? listTemps : list,
                            shownearby: false,
                            lastPage: page
                        });

                        if (this.status == 1) {
                            this.setData({
                                nohandlerNum: res.data.data.total
                            });
                        }
                    }
                })
                .catch((error) => {
                    console.log(error, 'error');
                });
        },

        more: function () {
            this.page++;
            this.storeStylistsByNexus();
        },

        preventTouchMove() {
            console.log('占位：函数 preventTouchMove 未声明');
        },

        shop() {
            console.log('占位：函数 shop 未声明');
        }
    }
};
</script>
<style>
.stylist-card {
    display: flex;
    flex-direction: row;
    background: #ffffff;
    box-shadow: 1px 1px 4px 0px rgba(236, 236, 236, 0.4);
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    margin: 20rpx 20rpx 0 20rpx;
    padding: 10rpx;
    box-sizing: border-box;
}

.stylist-card1 {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    align-content: center;
}

.search-stylist {
    width: 700rpx;
    margin-left: 30rpx;
    /* display: flex; */
    /* justify-content: center; */
}

/* 第二列 */
.stylist-card-second {
    display: flex;
    flex-direction: column;
}

.job3 {
    padding: 5rpx 20rpx;
    height: 32rpx;
    line-height: 32rpx;
    background: #ff8722;
    border-radius: 5px 0px 5px 0px;
    font-size: 20rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 500;
    color: #ffffff;
    margin-left: 10rpx;
    white-space: nowrap;
}

.headerimg {
    width: 160rpx;
    height: 200rpx;
}

.order {
    height: 34rpx;
    font-size: 24rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    /* color: #FF8722; */
    line-height: 34rpx;
}

.score>text {
    font-size: 24rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ff8722;
    line-height: 34rpx;
    margin: 0 10rpx 0 6rpx;
}

.card-last {
    display: flex;
    flex-direction: column;
    text-align: right;
    margin: 10rpx;
}

.price {
    color: red;
    font-size: 36rpx;
    font-weight: 500;
}

.mystylists-distince-wrap {
    display: flex;
    flex-direction: row;
    align-items: center;
    align-content: center;
    justify-content: center;
    margin: 30rpx 0rpx;
}

.project {
    font-size: 24rpx;
    font-weight: 200;
    line-height: 32rpx;
    text-align: left;
    display: inline-block;
}

.shopicon {
    width: 28rpx;
    height: 28rpx;
    margin-left: 10rpx;
}

.names {
    width: 300rpx;
    display: flex;
    flex-direction: row;
    align-content: center;
    align-items: center;
}

.shoptitletext1 {
    height: 50rpx;
    font-size: 32rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 50rpx;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}

.font-28 {
    font-size: 28rpx;
}

.font-32 {
    font-size: 32rpx;
}

.clip {
    width: 24rpx;
    height: 22rpx;
}

.shop-plat {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

/deep/.custom-class {
    z-index: 999 !important;
}

.van-tabs__nav,
.custom-class,
.van-tabs__scroll--line {
    background: #fbfbfb !important;
}

.m-40 {
    margin: 0 40rpx;
}

/* pages/home/index.wxss */
page {
    height: 100%;
    width: 100%;
    background: #fbfbfb;
}

/* 发型师，门店 */
.shop {
    height: 100%;
    width: 670rpx;
    margin: 0 40rpx;
    background: #fbfbfb;
    position: relative;
    top: -40rpx;
}

.top-36 {
    top: 34rpx;
}

.van-tab--active {
    font-size: 32rpx !important;
    font-weight: 900 !important;
}

/* .nav-class {
  width: 600rpx;
} */

.van-tabs__line {
    background: #ff8722 !important;
}

.van-tab {
    height: 100%;
}

.stylelist-detail {
    margin-left: 20rpx;
    height: 200rpx;
    width: 360rpx;
}

/* vant组件样式 */
.van-tab--active {
    font-size: 32rpx !important;
    font-weight: 500 !important;
}

/* 附近弹窗 */
.wrapper {
    height: 100%;
    position: relative;
}

.wbox {
    position: absolute;
    width: 100%;
    top: 0;
    background-color: #ffffff;
}

.textbox {
    display: flex;
    justify-content: space-around;
    height: 44px;
    align-items: center;
    padding: 0 10rpx;
}

.hx {
    width: 80rpx;
    height: 6rpx;
    background: #ff8722;
    border-radius: 3px;
    position: relative;
    top: 16rpx;
}

.textbox-1 {
    font-size: 31rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 44rpx;
    text-align: center;
    flex-wrap: wrap;
    justify-content: center;
    display: flex;
    width: 50%;
    padding: 0 10rpx;
    position: relative;
    top: 2rpx;
    left: -10rpx;
}

.textbox-1 text {
    width: 100%;
}

.textbox-2 {
    font-size: 26rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #999999;
    line-height: 40rpx;
    width: 50%;
    text-align: center;
}

.color-0 {
    color: #000;
}

.color-9 {
    color: #999;
}

.flexbox {
    display: flex;
    flex-wrap: nowrap;
}

.leftbox {
    width: 220rpx;
    background: #f8f8f8;
    height: 630rpx;
    overflow-y: auto;
}

.lefttext {
    width: 220rpx;
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    text-align: center;
    padding: 20rpx 0;
}

.lefttext1 {
    background-color: #ffffff;
    color: #000;
}

.rightbox {
    text-align: right;
    width: 530rpx;
    height: 630rpx;
    overflow-y: auto;
    padding-right: 40rpx;
}

.righttext {
    width: 490rpx;
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    padding: 20rpx 0;
    box-sizing: border-box;
    border-bottom: 1px solid #f9f9f9;
}

.righttext1 {
    color: #000;
}

.names>view:nth-child(1) {
    max-width: 170rpx;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    margin-right: 10rpx;
}

.ranklb {
    height: 90rpx;
    border-bottom: 1px solid #dadada;
    box-sizing: border-box;
    line-height: 90rpx;
}

.label {
    width: 100%;
    padding: 0 40rpx;
    color: #666666;
}

.filter-header {
    height: 60rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin: 20rpx 50rpx;
}

.header {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    line-height: 40rpx;
}

.jiao {
    width: 0;
    height: 0;
    border-right: 10rpx solid transparent;
    border-left: 10rpx solid transparent;
    border-top: 10rpx solid #999999;
}

.jiao1 {
    width: 0;
    height: 0;
    border-right: 10rpx solid transparent;
    border-left: 10rpx solid transparent;
    border-top: 10rpx solid #000;
}

.settlelist-sort {
    width: 40rpx;
    height: 40rpx;
    margin-top: 5rpx;
    margin-left: 15rpx;
}

/* 弹窗 */
.modal-mask {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: #000;
    opacity: 0.5;
    overflow: hidden;
    z-index: 9000;
    color: #fff;
}

.modal-dialog {
    overflow: hidden;
    position: fixed;
    z-index: 9999;
    background: #fff;
    border-top-left-radius: 20rpx;
    border-top-right-radius: 20rpx;
    bottom: 0;
}

.modal-header1 {
    height: 20%;
    box-sizing: border-box;
    padding: 35rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-title {
    font-size: 36rpx;
    color: #030303;
    text-align: center;
}

.modal-content {
    padding: 10rpx;
}

.modal-footer {
    width: 400rpx;
    height: 88rpx;
    box-sizing: border-box;
    padding: 0 20rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid #eee;
    background-color: #ff8722;
    border-radius: 44rpx;
    margin: 30rpx 175rpx;
}

.modal-footer view {
    font-size: 36rpx;
    color: #fff;
    font-weight: 500;
}

.btn-cancel {
    color: #666;
    text-align: center;
}

.section_cycle {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 20rpx;
}

.section_cycle_nochecked {
    display: flex;
    flex-direction: column;
    padding: 0 20rpx;
    height: 50rpx;
    font-size: 28rpx;
    color: #999;
    border: 1px #ccc solid;
    border-radius: 10rpx;
    margin: 10rpx 20rpx;
    justify-content: center;
    align-items: center;
}

.section_cycle_checked {
    display: flex;
    flex-direction: column;
    padding: 0 20rpx;
    height: 50rpx;
    font-size: 28rpx;
    color: #fff;
    border-radius: 10rpx;
    margin: 10rpx 20rpx;
    justify-content: center;
    align-items: center;
    border: 1px #ff8722 solid;
    background-color: #ff8722;
}

.section_cycle_nouseed {
    display: flex;
    flex-direction: column;
    width: 120rpx;
    height: 50rpx;
    font-size: 28rpx;
    color: #ffffff;
    border-radius: 10rpx;
    margin: 10rpx 20rpx;
    justify-content: center;
    align-items: center;
    background-color: #d6d6d6;
}

.section_cycle1 text {
    font-size: 36rpx;
    margin-left: 25rpx;
}

.statusbox {
    width: 710rpx;
    height: 50rpx;
    background: #ffefee;
    box-shadow: 1px 1px 4px 0px rgba(236, 236, 236, 0.4);
    border-radius: 0px 0px 6px 6px;
    font-size: 24rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #ff1b0b;
    line-height: 50rpx;
    text-align: center;
    margin: 0 20rpx;
}

.statusbox1 {
    width: 710rpx;
    height: 50rpx;
    background: #ededed;
    box-shadow: 1px 1px 4px 0px rgba(236, 236, 236, 0.4);
    border-radius: 0px 0px 6px 6px;
    font-size: 24rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #999999;
    line-height: 50rpx;
    text-align: center;
    margin: 0 20rpx;
}

.c-o {
    color: #ff8722;
}

/deep/.van-tabs__line {
    width: 80rpx !important;

}
</style>
